<template>
	<view>
		<view class="navigation-bar">
			<view @click="turnBack">
				<image src="/static/左箭头.png"></image>
			</view><text>附近门店</text>
		</view>
		<view class="search-container">
			<input class="search" placeholder="输入需要搜索的内容" />
			<view class="search-icon-right">
				<image src="/static/搜索@3x.png" class="search-icon" />
			</view>
		</view>
		<view class="historicalRecords">
			<view class="historical">历史记录:</view>
			<view class="records">飞飞汽车美容店</view>
			<view class="records">飞飞汽车美容店</view>
			<view class="records">飞飞汽车美容店</view>
			<view class="records">飞飞汽车美容店</view>
			<view class="records">飞飞汽车美容店</view>
			<view class="records">飞飞汽车美容店</view>
			<view class="records">汽修美容店</view>
		</view>
		<view class="card" @click="nextPage">
			<view class="head"><text>车百事汽车生活馆</text><text>556m</text></view>
			<view class="score" v-if="score > 0">
				<uni-rate size="15" :value="score" />
				<text>{{ score }}分</text>
			</view>
			<view class="score" v-else>
				<view>暂无评分</view>
			</view>
			<view class="body1">
				<view class="body">
					<view>
						<image class="storeimg" src=""></image>
					</view>
					<view class="details">
						<view>营业时间：周一至周五</view>
						<view>早上8：00到晚上22：00</view>
						<view>山阳区人民路与解放路交叉口</view>
					</view>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="head"><text>车百事汽车生活馆</text><text>556m</text></view>
			<view class="score"><uni-rate size="18" :value="5" /><text>5分</text><text class="volume">销量：556</text>
			</view>
			<view class="body1">
				<view class="body">
					<view>
						<image class="storeimg" src=""></image>
					</view>
					<view class="details">
						<view>营业时间：周一至周五</view>
						<view>早上8：00到晚上22：00</view>
						<view>山阳区人民路与解放路交叉口</view>
					</view>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="head"><text>车百事汽车生活馆</text><text>556m</text></view>
			<view class="score"><uni-rate size="18" :value="5" /><text>5分</text><text class="volume">销量：556</text>
			</view>
			<view class="body1">
				<view class="body">
					<view>
						<image class="storeimg" src=""></image>
					</view>
					<view class="details">
						<view>营业时间：周一至周五</view>
						<view>早上8：00到晚上22：00</view>
						<view>山阳区人民路与解放路交叉口</view>
					</view>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="head"><text>车百事汽车生活馆</text><text>556m</text></view>
			<view class="score"><uni-rate size="18" :value="5" /><text>5分</text><text class="volume">销量：556</text>
			</view>
			<view class="body1">
				<view class="body">
					<view>
						<image class="storeimg" src=""></image>
					</view>
					<view class="details">
						<view>营业时间：周一至周五</view>
						<view>早上8：00到晚上22：00</view>
						<view>山阳区人民路与解放路交叉口</view>
					</view>
				</view>
			</view>
		</view>
		<view class="more">—暂无更多—</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cover: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
				avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
				extraIcon: {
					color: '#4cd964',
					size: '22',
					type: 'gear-filled'
				},
				score: 0 // 初始化评分为 0
			}
		},
		methods: {
			turnBack() {
				uni.navigateBack({
					url: "/pages/index/index"
				})
			},
			nextPage() {
				uni.navigateTo({
					url: "/packageMaintenance/pages/storeDetails/storeDetails"
				})
			}
		}
	};
</script>

<style scoped>
	.navigation-bar {
		height: 150rpx;
		display: flex;
		align-items: center;
		background-color: #287BF6;
	}

	.navigation-bar>view>image {
		width: 30rpx;
		height: 30rpx;
		margin-left: 30rpx;
	}

	.navigation-bar>text {
		color: #FFF;
		margin-right: 40rpx;
		flex-grow: 1;
		text-align: center;
	}

	.search-container {
		position: relative;
		background-color: #287BF6;
	}

	.search {
		height: 60rpx;
		display: flex;
		align-items: center;
		border: none;
		/* 去掉边框 */
		background-color: #fff;
		/* 设置背景颜色为白色 */
		border-radius: 20px;
		/* 设置圆角，让搜索框边缘变圆 */
		padding: 5px 20px;
		margin: 0 30rpx;
	}

	.search-icon-right {
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
	}

	.search-icon {
		width: 15px;
		height: 15px;
		margin-right: 50rpx;
	}

	.historicalRecords {
		display: flex;
		flex-wrap: wrap;
		color: #FFF;
		background-color: #287BF6;
		justify-content: flex-start;
		align-items: center;
		height: 100px;
		overflow: hidden;
	}

	.historical {
		width: 130rpx;
		font-size: 30rpx;
		margin-left: 30rpx;
		margin-top: 10rpx;
		/* 让历史记录标题占满一行 */
	}

	.records {
		width: 168rpx;
		font-size: 24rpx;
		margin-top: 15rpx;
		margin-left: 10rpx;
		margin-right: 5rpx;
		padding-bottom: 10rpx;
	}

	.card {
		margin: 20rpx;
		border-radius: 10px;
		background-color: #FFF;
	}

	.head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 30rpx;
	}

	.head>text {
		margin-top: 25rpx;
	}

	.head>text:nth-child(1) {
		font-weight: bold;
	}

	.head>text:nth-child(2) {
		color: #549AFD;
	}

	.score {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-left: 25rpx;
		margin-top: 10rpx;
	}
	.score>view{
		margin-left: 10rpx;
		font-size: 25rpx;
	}

	.volume {
		margin-left: 20rpx;
	}

	.body1 {
		padding: 25rpx 0;
	}

	.body {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.storeimg {
		width: 200rpx;
		height: 150rpx;
		background-color: aqua;
		margin-left: 25rpx;
		border-radius: 10px;
	}

	.details {
		margin-left: 20rpx;
	}

	.more {
		text-align: center;
		font-size: 25rpx;
		color: #7F7F7F;
		margin-top: 40rpx;
	}
</style>